<template>
  <div class="me">
    <div class="tou">
      <div class="deng">
        <img src="tx.jpg" alt="" />
        <router-link to="/login"> <button>{{user || "请登录"}}</button></router-link>
      </div>
    </div>
    <div class="caidan">
      <p>
        <span class="s1">0.00</span>
        <span class="s2">积分</span>
      </p>
      <p>
        <span class="s1">0张</span>
        <span class="s2" @click="zifun()">子组件</span>
      </p>
      <p>
        <span class="s1">0张</span>
        <span class="s2" @click="funn()">父组件</span>
      </p>
    </div>
    <div class="dingdan">
      <div class="top">
        <h3>我的订单</h3>
        <span class="iconfont icon-youjiantou"></span>
      </div>
      <div class="bottom">
        <div>
          <span class="iconfont icon-daifukuan"></span>
          <p>代付款</p>
        </div>
        <div>
          <span class="iconfont icon-daifahuo"></span>
          <p>待发货</p>
        </div>
        <div>
          <span class="iconfont icon-daishouhuo"></span>
          <p>待收货</p>
        </div>
        <div>
          <span class="iconfont icon-tuikuanshouhou"></span>
          <p>退款售后</p>
        </div>
      </div>
    </div>

    <div class="gg">
      <div>
        <span class="iconfont icon-kecheng" style="color: #93b6cf"></span>
        <span>我的课程</span>
      </div>
      <div>
        <span class="iconfont icon-wodefuli" style="color: #f4b5b5"></span>
        <span>企业福利</span>
      </div>
      <div>
        <span class="iconfont icon-kefu" style="color: #abc6da"></span>
        <span>人工客服</span>
      </div>
      <div>
        <span class="iconfont icon-shezhi" style="color: #afc47b"></span>
        <span @click="funnn()">设置</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    computed:{
    user(){
      if(localStorage.getItem("user")==""){
        return "点击登录"
      }else{
      return localStorage.getItem("user")
      }

    }
  },
  methods: {
    funn() {
      this.$router.push("/some");
    },
    funnn() {
      this.$router.push("/set");
    },
    zifun() {
      this.$router.push("/somezi");
    },
  },
   beforeRouteEnter(to,from,next){
        console.log(to)
        console.log(from)
        console.log("进来了")
        next()
    },
    // 离开组件的时候调用
     beforeRouteLeave(to,from,next){
        console.log("离开了")
         console.log(to)
        console.log(from)
        if(confirm("是否离开?")){
            next()
        }else{
            next(false)
        }
    }
};
</script>

<style scoped>
@import url(../assets/life/iconfont.css);
.tou {
  width: 100%;
  height: 1.45rem;
  background-image: url("../../public/bg.png");
  background-size: 130% 130%;
  overflow: hidden;
}
.deng {
  width: 100%;
  display: flex;
  height: 0.7rem;
  align-items: center;
  margin-top: 0.3rem;
  margin-left: 0.2rem;
}
.tou img {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  margin-top: 0.5rem;
}
.tou button {
  border: 0;
  background: #fff;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-size: 0.17rem;
  margin-left: 0.25rem;
}
.caidan {
  width: 100%;
  height: 0.65rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
}
.caidan p {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.caidan p .s1 {
  font-size: 0.17rem;
}
.caidan p .s2 {
  font-size: 0.13rem;
  color: #797d82;
}
.dingdan {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0.1rem;
}
.dingdan .top {
  width: 100%;
  height: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-bottom: 1px solid #ededed;
}
.top h3 {
  margin-left: 0.2rem;
}
.top .iconfont {
  margin-right: 0.2rem;
}
.dingdan .bottom {
  width: 100%;
  height: 0.8rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
}
.dingdan .bottom div {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.13rem;
  color: #797d82;
}
.dingdan .bottom div .iconfont {
  font-size: 0.3rem;
  color: #797d82;
  margin-bottom: 0.05rem;
}

.gg {
  width: 100%;
  background-color: #fff;
  margin-top: 0.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gg div {
  width: 92%;
  height: 0.5rem;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ededed;
}
.gg div .iconfont {
  font-size: 0.25rem;
  margin-right: 0.1rem;
}
.gg div p {
  font-size: 0.15rem;
}
</style>